<template>
  <div>
    <el-table
      ref="multipleTable"
      style="width: 100%"
      :data="warnList"
      :show-header="false"
    >
      <el-table-column prop="grade" :label="$t('grade')" width="80"  :formatter="formatGrade" />
      <el-table-column :label="$t('status')"  width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 2" type="success" @click="edit(scope.row)">{{ formatDeviceWarnStatus(scope.row.status) }}</el-tag>
          <el-tag v-else type="danger" @click="edit(scope.row)">{{ formatDeviceWarnStatus(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('message')"
      >
        <template slot-scope="scope">
          <router-link
            :to="{ path:'/device/manage/'+scope.row.deviceCore ,query:{'deviceCore':scope.row.deviceCore}}"
          >
            <span>{{ scope.row.target }}</span>
            <span>{{ scope.row.value }}</span>
            <span>{{ scope.row.logic }}</span>
            <span>{{ scope.row.logicValue }}</span>
            <span style="float: right">
              <span>{{ formatDate(scope.row.createdDate) }}</span>
              <span v-if="0 !== scope.row.endDate">{{ ' ~ '+formatDate(scope.row.endDate) }}</span>
            </span>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right;margin: 15px 0">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      append-to-body
      :title="$t('status')"
      :visible.sync="dialogTableVisible"
    >
      <el-form
        label-width="120px"
      >
        <el-form-item :label="$t('status')">
          <el-radio v-model="warn.status" :label="0">{{ $t("untreated") }}</el-radio>
          <el-radio v-model="warn.status" :label="1">{{ $t("misinformation") }}</el-radio>
          <el-radio v-model="warn.status" :label="2">{{ $t("processed") }}</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="updateStatus">{{ $t("confirm") }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import {
  formatDate,
  successNotice
} from '@/util/common'
import {
  pageGetDeviceWarn,
  updateDeviceWarn
} from '@/api/iot/iotDeviceWarnApi'
import {
  getPageSize,
  setPageSize
} from '@/util/storage'
export default {
  name: 'DeviceWarn',
  props: {
    deviceCore: {
      type: String,
      default: null
    },
    port: {
      type: String,
      default: null
    },
    keyName: {
      type: String,
      default: null
    },
    status: {
      type: Number,
      default: 0
    },
    sensorId: {
      type: Number,
      default: null
    },
    deviceId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      warnList: [],
      warn: {},
      dialogTableVisible: false,
      currentPage: 1,
      total: 0,
      pageSize: getPageSize()
    }
  },
  mounted() {
    const timestamp = new Date().getTime()
    this.startDate = new Date().getTime() - 7 * 24 * 60 * 60 * 1000
    this.endDate = timestamp
    this.pageGetDeviceWarn()
  },
  methods: {
    edit(item) {
      this.warn = item
      this.dialogTableVisible = true
    },
    updateStatus() {
      updateDeviceWarn({
        status: this.warn.status,
        warnId: this.warn.warnId
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
          this.dialogTableVisible = false
          this.pageGetDeviceWarn()
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      setPageSize(this.pageSize)
      this.pageGetDeviceWarn()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.pageGetDeviceWarn()
    },
    formatDeviceWarnStatus(status) {
      if (status === 0) {
        return this.$t('untreated')
      } else if (status === 1) {
        return this.$t('misinformation')
      } else if (status === 2) {
        return this.$t('processed')
      }
    },
    formatGrade(item) {
      return this.$t('warn') + item.grade
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    pageGetDeviceWarn() {
      pageGetDeviceWarn({
        status: this.status,
        sensorId: this.sensorId,
        deviceId: this.deviceId,
        deviceCore: this.deviceCore,
        port: this.port,
        keyName: this.keyName,
        pageSize: this.pageSize,
        currentPage: this.currentPage
        // startDate: Math.round(this.startDate / 1000),
        // endDate: Math.round(this.endDate / 1000)
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.total = data.total
          this.warnList = data.data
        }
      })
    }
  }
}
</script>
<style scoped>
</style>
